import React from 'react';

import {
  ETerminalErrorType,
  ITerminalError,
  ITerminalErrorService,
  ITerminalGroupViewService,
  IWidget,
} from '../../common';

import styles from './terminal.module.less';
import { localize } from '../../../utils';

export interface IProps {
  widget: IWidget; // 终端 widget 实例
  show: boolean; // 是否显示
  error: ITerminalError | undefined; // 终端错误信息
  errorService: ITerminalErrorService; // 终端错误服务
  view: ITerminalGroupViewService; // 终端分组视图服务
}

// 渲染终端错误提示
function renderError(
  error: ITerminalError,
  eService: ITerminalErrorService,
  view: ITerminalGroupViewService
) {
  const onRemoveClick = () => {
    view.removeWidget(error.id);
  };

  const onRetryClick = () => {
    eService.fix(error.id);
  };

  if (error?.type === ETerminalErrorType.CREATE_FAIL) {
    return (
      <div className={styles.terminalCover}>
        <div>
          {localize('terminal.can.not.create')}: {error.message}
        </div>
        <div>
          <a onClick={onRemoveClick}>{localize('terminal.stop')}</a>
          {localize('terminal.or')}
          <a onClick={onRetryClick}>{localize('terminal.try.recreate')}</a>
        </div>
      </div>
    );
  }

  return error.stopped ? (
    <div className={styles.terminalCover}>
      <div>{localize('terminal.disconnected')}</div>
      <div>
        {localize('terminal.can.not.reconnect')}
        <a onClick={onRetryClick}>{localize('terminal.try.reconnect')}</a>
      </div>
    </div>
  ) : (
    <div className={styles.terminalCover}>
      <div>{localize('terminal.disconnected')}</div>
      <div>
        <a onClick={onRemoveClick}>{localize('terminal.stop')}</a>
        {localize('terminal.or')}
        <a onClick={onRetryClick}>{localize('terminal.try.reconnect')}</a>
      </div>
    </div>
  );
}

// 终端 widget 组件
const TerminalWidget: React.FC<IProps> = ({
  widget,
  error,
  show,
  errorService,
  view,
}) => {
  const content = React.useRef<HTMLDivElement | null>(null);

  React.useEffect(() => {
    if (content.current && widget.element) {
      console.log('widget.element', widget.element);
      content.current.appendChild(widget.element);

    } else if (content.current && !widget.element) {
      console.log('create new element for widget', widget.id);

      const ele = document.createElement('div');
      content.current.appendChild(ele);
      ele.className = styles.terminalContent;
      widget.element = ele;

    }
  }, []);

  React.useEffect(() => {
    widget.show = show;
  }, [show]);

  React.useEffect(() => {
    widget.error = !!error;
  }, [error]);

  const onFocus = () => {
    view.selectWidget(widget.id);
  };

  return (
    <div className={styles.terminalContainer}>
      {error ? renderError(error, errorService, view) : null}
      <div
        data-term-id={widget.id}
        style={{ display: error ? 'none' : 'block' }}
        className={styles.terminalContentWrapper}
        onFocus={onFocus}
        ref={content}
      ></div>
    </div>
  );
};

export default TerminalWidget;
